<template>
	<div class="p-6 space-y-6">

		<el-tabs v-model="activeTab">
			<el-tab-pane label="销售协议" name="agreement">
				<el-button type="primary" size="small" class="mb-4" @click="openAgreementDialog">新建协议</el-button>
				<el-table :data="agreements" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="协议名称" />
					<el-table-column prop="customer" label="客户" />
					<el-table-column prop="date" label="签订日期" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="客户价格" name="customerPrice">
				<el-button type="primary" size="small" class="mb-4" @click="openPriceDialog">新建客户价格</el-button>
				<el-table :data="prices" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="customer" label="客户" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="price" label="价格" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="产品报价查询" name="quote">
				<el-input v-model="quoteSearch" placeholder="输入产品名称查询" size="small" class="mb-4" style="width: 200px" />
				<el-table :data="filteredQuotes" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="price" label="报价" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="客户资料变更" name="customerChange">
				<el-button type="primary" size="small" class="mb-4" @click="openCustomerDialog">新增变更</el-button>
				<el-table :data="customerChanges" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="customer" label="客户" />
					<el-table-column prop="change" label="变更内容" />
					<el-table-column prop="date" label="变更时间" />
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<!-- 弹窗们 -->
		<el-dialog v-model="agreementDialog" title="新建销售协议" width="400px">
			<el-form :model="currentAgreement" label-width="80px">
				<el-form-item label="协议名称">
					<el-input v-model="currentAgreement.name" />
				</el-form-item>
				<el-form-item label="客户">
					<el-input v-model="currentAgreement.customer" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveAgreement">保存</el-button>
					<el-button @click="agreementDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="priceDialog" title="新建客户价格" width="400px">
			<el-form :model="currentPrice" label-width="80px">
				<el-form-item label="客户">
					<el-input v-model="currentPrice.customer" />
				</el-form-item>
				<el-form-item label="产品">
					<el-input v-model="currentPrice.product" />
				</el-form-item>
				<el-form-item label="价格">
					<el-input v-model="currentPrice.price" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="savePrice">保存</el-button>
					<el-button @click="priceDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="customerDialog" title="客户资料变更" width="400px">
			<el-form :model="currentCustomerChange" label-width="80px">
				<el-form-item label="客户">
					<el-input v-model="currentCustomerChange.customer" />
				</el-form-item>
				<el-form-item label="变更内容">
					<el-input v-model="currentCustomerChange.change" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveCustomerChange">保存</el-button>
					<el-button @click="customerDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('agreement')

const agreements = ref([])
const prices = ref([])
const quotes = ref([])
const customerChanges = ref([])

const customers = ['华为', '中兴', '京东方', '台积电', '长江存储']
const products = ['EUV光刻胶', 'G线光刻胶', '氧化硅抛光液', '蚀刻液', '去胶剂']

agreements.value = Array.from({ length: 10 }).map((_, i) => ({
	name: `销售协议${i + 1}`,
	customer: customers[Math.floor(Math.random() * customers.length)],
	date: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 30).toLocaleDateString()
}))

prices.value = Array.from({ length: 10 }).map(() => ({
	customer: customers[Math.floor(Math.random() * customers.length)],
	product: products[Math.floor(Math.random() * products.length)],
	price: (Math.random() * 5000 + 500).toFixed(2)
}))

quotes.value = Array.from({ length: 10 }).map(() => ({
	product: products[Math.floor(Math.random() * products.length)],
	price: (Math.random() * 5000 + 500).toFixed(2)
}))

customerChanges.value = Array.from({ length: 10 }).map(() => ({
	customer: customers[Math.floor(Math.random() * customers.length)],
	change: '联系方式更新',
	date: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 30).toLocaleDateString()
}))

const quoteSearch = ref('')
const filteredQuotes = computed(() => {
	return quoteSearch.value
		? quotes.value.filter(q => q.product.includes(quoteSearch.value))
		: quotes.value
})

const agreementDialog = ref(false)
const priceDialog = ref(false)
const customerDialog = ref(false)

const currentAgreement = ref({ name: '', customer: '', date: new Date().toLocaleDateString() })
const currentPrice = ref({ customer: '', product: '', price: '' })
const currentCustomerChange = ref({ customer: '', change: '', date: new Date().toLocaleDateString() })

const openAgreementDialog = () => { agreementDialog.value = true; currentAgreement.value = { name: '', customer: '', date: new Date().toLocaleDateString() } }
const openPriceDialog = () => { priceDialog.value = true; currentPrice.value = { customer: '', product: '', price: '' } }
const openCustomerDialog = () => { customerDialog.value = true; currentCustomerChange.value = { customer: '', change: '', date: new Date().toLocaleDateString() } }

const saveAgreement = () => { agreements.value.push({ ...currentAgreement.value }); ElMessage.success('协议已保存'); agreementDialog.value = false }
const savePrice = () => { prices.value.push({ ...currentPrice.value }); ElMessage.success('客户价格已保存'); priceDialog.value = false }
const saveCustomerChange = () => { customerChanges.value.push({ ...currentCustomerChange.value }); ElMessage.success('客户资料变更已保存'); customerDialog.value = false }
</script>


<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>